<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>大师信息</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
	<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
	<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body class="layui-layout-body">
    <%--条件查询    start--%>
    <div>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" id="nickname">
        </div>
        <button class="layui-btn" id="lookfor">查找上师</button>
    </div>
    <%--条件查询    end--%>

	<%--批量上传 和下载   start--%>
	<div>
		<div class="layui-upload">
			<button type="button" class="layui-btn" id="test8">选择文件</button>
			<button type="button" class="layui-btn" id="test9">开始上传</button>
			<button class="layui-btn" id="downloadall">批量下载</button>
		</div>

	</div>
	<%--批量上传 和下载   end--%>

	<%--表格 start--%>
	<div class="layui-row">
		<table id="guruList" lay-filter="guruList"></table>
	</div>
    <!--自定义显示图片 d代表data当前对象-->
    <script type="text/html" id="showimg">
        <img src="${pageContext.request.contextPath}/{{d.guruImage}}" width="39px" height="39px"/>
    </script>
    <!--自定义显示图片 d代表data当前对象-->
	<!--表格最右边编辑表格-->
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">冰冻/解冻</a>
		<%--<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>--%>
	</script>
	<%--表格 end--%>

	<%--添加  start--%>
	<form class="layui-form" action="" lay-filter="addFromFilter" id="addForm" style="display: none;padding: 20px 50px 0 0 " method="post" enctype="multipart/form-data">
		<div class="layui-form-item">
			<label class="layui-form-label">上师姓名</label>
			<div class="layui-input-block">
				<input type="text" name="guruName" required  lay-verify="required" placeholder="app显示" autocomplete="off" class="layui-input">
			</div>
		</div>
        <div class="layui-form-item">
            <label class="layui-form-label">上师法号</label>
            <div class="layui-input-block">
                <input type="text" name="guruNickname" required  lay-verify="required" placeholder="app显示" autocomplete="off" class="layui-input">
            </div>
        </div>
		<div class="layui-form-item">
			<label class="layui-form-label">上师状态</label>
			<div class="layui-input-block">
				<select name="guruStatus">
					<option value="0" checked>显示</option>
					<option value="1">冻结</option>
				</select>
			</div>
		</div>
        <div class="layui-form-item">
            <label class="layui-form-label">上传头像</label>
            <div class="layui-input-block">
                <input type="hidden" name="guruImage">
                <button type="button" class="layui-btn" id="guruImage">
                    <i class="layui-icon">&#xe67c;</i>上传
                </button>
            </div>
        </div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<%--添加  end--%>

	<script>
		layui.use(['form','table','layer','upload'],function () {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var upload = layui.upload;
			var $ = layui.$;
			/*显示表格所有内容*/
			table.render({
				elem: '#guruList'
				,height: 500
				,url: '${pageContext.request.contextPath}/guru/selectAllGurus' //数据接口
				,limit:5   //默认每页三条数据,要求limit的值必须包含的limits中
				,limits:[5,10,15]
				,page: true //开启分页
				,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
				,totalRow: true //开启合计行
				,cols: [[ //表头
					{type:'checkbox'}
					,{field: 'guruId', title: '编号', width:75}
					,{field: 'guruName', title: '上师名字', width:150}
					,{field: 'guruImage', title: '上师图片', width:150,align: "center", templet: "#showimg"}
					,{field: 'guruNickname', title: '上师法号', width:150}
					,{field: 'guruStatus', title: '状态', width:150,templet:function (d) {
							if (d.guruStatus==0) {
								return '正常'
							}else {
								return '冻结'
							}
						}}
					,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
				]]
			});
            /*---------条件查询start-------*/
            $("#lookfor").click(function () {
                table.reload('guruList',{
                    where:{
                        nickname:$("#nickname").val()
                    },
                    page:{
                        curr:1  //从第一页开始
                    }
                })
            })
            /*--------条件查询end-------------*/

			//选完文件后不自动上传
			upload.render({
				elem: '#test8'
				,url: '${pageContext.request.contextPath}/guru/uploadAll' //改成您自己的上传接口
				,accept:'file'
				,auto: false
				//,multiple: true
				,bindAction: '#test9'
				,done: function(res){
					if (res){
						layer.msg('上传成功');
						table.reload('guruList');
					}else {
						console.log(res)
						layer.msg('上传失败');
					}
				},
				error:function () {
					alert("出现异常，联系管理员！")
				}
			});
			/*批量下载  开始*/
			$("#downloadall").click(function () {
				$.ajax({
					url:'${pageContext.request.contextPath}/guru/downloadAll',
					success:function (result) {
						if (result){
							layer.msg("下载成功！")
						}
						else {
							layer.msg("下载失败！")
						}
					},
					error:function () {
						alert("出现异常，联系管理员！")
					}
				})
			})
			/*批量下载  结束*/

            //-----最左头侧！监听头工具栏事件,左边+号  tableFilter是表格上的Filter   start---
            table.on('toolbar(guruList)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id)
                    ,data = checkStatus.data; //获取选中的数据
                switch(obj.event){
                    case 'add':
                        // ----- 添加数据1 弹出层进行添加start-------
                        layer.open({
                            type:1,
                            title:["添加上师","color:black;font-size:20px;"],
                            area:"500px",
                            maxmin: true,
                            content:$("#addForm")
                        })
                        // ----- 添加数据1 弹出层进行添加end-------
                        break;
                    case 'update':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else if(data.length > 1){
                            layer.msg('只能同时编辑一个');
                        } else {
                            layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                        }
                        break;
                    case 'delete':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        } else {
                            layer.msg('删除');
                        }
                        break;
                };
            });
            /*---上传图片并回显到隐藏域方便添加时直接使用  start---- */
            /*--图片添加回显 start--*/
            upload.render({
                elem:'#guruImage',
                url:'${pageContext.request.contextPath}/banner/upload',
                done:function (res) {
                    form.val('addFromFilter',{
                        guruImage:res.bannerImageUrl
                    })
                }
            })
            /*--图片添加回显 end--*/
            /*---上传图片并回显到隐藏域方便添加时直接使用  end---- */
            // ----- 添加start-------
            form.on('submit(formDemo)',function () {
                $.ajax({
                    url:'${pageContext.request.contextPath}/guru/insertGuru',
                    data:$("#addForm").serialize(),
                    success:function (result) {
                        if (result.flag){
                            layer.closeAll();//关闭弹出框
                            $("#addForm")[0].reset();//清空表单内容
                            //进行重新加载
                            table.reload('guruList');
                            //响应给用户信息，添加成功
                            layer.msg("添加成功！")
                        }
                        else {
                            layer.msg("添加失败！")
                        }
                    },
                    error:function () {
                        alert("出现异常，联系管理员！")
                    }
                })
                return false;
            });
            // ----- 添加end-------

            /*---编辑、删除 start---*/
            table.on('tool(guruList)',function (obj) {
                //修改
                if(obj.event=='edit'){
                    console.log(obj.data)
                    $.ajax({
                        url:'${pageContext.request.contextPath}/guru/updateGuruStatus',
                        data:obj.data,
                        success:function (result) {
                            if (result.flag){
                                table.reload('guruList');
                                //响应给用户信息，添加成功
                                layer.msg("状态更换成功！")
                            }
                            else {
                                layer.msg("状态更换失败！")
                            }
                        },
                        error:function () {
                            alert("出现异常，联系管理员！")
                        }
                    })
                } else {

                }
                return false;
            })
            /*---编辑、删除 end---*/
		})

	</script>
</body>

</html>